<template>
  <div class="base">
    <template v-for="(item, index) in stationData" :key="index">
      <el-popover
        placement="right"
        :width="200"
        trigger="hover"
        content="this is content, this is content, this is content"
      >
        <template #reference>
          <div :class="item.classType" :id="`station${index}`">
            {{ item.name }}
          </div>
        </template>
      </el-popover>
    </template>

    <div class="pannel">
      <span class="pannelTitle">坐标显示</span>
      <span class="position"></span>
      <!-- 此处显示射线拾取的坐标 -->
    </div>

    <canvas id="webgl"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import utils from "@/utils";

import stationData from "./data/station";
import Experience from "./class/Experience";

const experience = ref();
onMounted(() => {
  // 特别说明 窗口尺寸改变的时候Webgl元素的长宽不会变化
  // 渲染的尺寸应该根据.base 这个元素的长宽而变化
  const outBox = document.querySelector(".base");
  const canvas = document.querySelector("#webgl");
  experience.value = new Experience(canvas, outBox);
});
onUnmounted(() => {
  experience.value.destroy();
});
</script>
<style lang="scss" scoped>
.base {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: relative;
  #webgl {
    width: 100%;
    height: 100%;
  }
  .pannel {
    @include flex(column, flex-start, flex-start);
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    width: 180px;
    padding: 10px 20px;
    background-color: #2a61aa;
    color: #fff;
    .pannelTitle {
      font-weight: bold;
    }
  }

  .station {
    @include flex(row);
    position: absolute;
    width: 500px;
    height: 40px;
    background-color: #0a3c85;
    // pointer-events: none;
    // width: 200px;
    height: 40px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: 2;
    cursor: pointer;
    border: 1px solid #fff;
    font-size: 20px;
  }
  .small_station {
    @include flex(row);
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: #0a3c85;
    // pointer-events: none;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: 2;
    cursor: pointer;
    border: 1px solid #fff;
    font-size: 18px;
  }
  .mini_station {
    @include flex(row);
    position: absolute;
    width: 80px;
    height: 30px;
    background-color: #0a3c85;
    // pointer-events: none;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    z-index: 2;
    cursor: pointer;
    border: 1px solid #fff;
    font-size: 18px;
  }
}
</style>